<template>
  <div class="wrapper">
    <div @click="tabTo('home')" class="bar-item">
      <text class="iconfont bar-ic" :class="[this.current('home')]">&#xe660;</text>
      <text class="bar-txt" :class="[this.current('home')]">首页</text>
    </div>
    <div @click="tabTo('class')" class="bar-item">
      <text class="iconfont bar-ic" :class="[this.current('class')]">&#xe744;</text>
      <text class="bar-txt" :class="[this.current('class')]">分类</text>
    </div>
    <div @click="tabTo('brand')" class="bar-item">
      <text class="iconfont bar-ic" :class="[this.current('brand')]">&#xe605;</text>
      <text class="bar-txt" :class="[this.current('brand')]">品牌特惠</text>
    </div>
    <div @click="tabTo('zetianshuo')" class="bar-item">
      <text class="iconfont bar-ic" :class="[this.current('zetianshuo')]">&#xe61a;</text>
      <text class="bar-txt" :class="[this.current('zetianshuo')]" >择天说</text>
    </div>
    <div @click="tabTo('my')" class="bar-item">
      <text class="iconfont bar-ic" :class="[this.current('my')]">&#xe61a;</text>
      <text class="bar-txt" :class="[this.current('my')]" >我的</text>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TabBar",
    data(){
      return{
        currentIndex:'home'
      }
    },
    computed:{

    },
    methods:{
      current(_c){
        return this.currentIndex === _c?'bar-active':'';
      },
      tabTo(current){
        if(this.currentIndex === current) return;
        this.currentIndex = current;
        this.$emit('tabTo',current)
      }
    }
  }
</script>

<style scoped>
  .iconfont{
    font-family: iconfont;
  }
  .wrapper{
    position: fixed;
    bottom:0;
    left:0;
    right:0;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    height:90px;
    border-top-width: 1px;
    border-top-color: #d9d9d9;
    background-color: #fafafa;
  }
  .bar-item{
    flex:1;
  }
  .bar-txt,.bar-ic{
    color:#666;
    text-align: center;
  }
  .bar-ic{
    padding-top:10px;
    font-size: 38px;
  }
  .bar-txt{
    font-size:24px;
    /*padding-bottom:10px;*/
  }
  .bar-active{
    color:#FF0039;
  }

</style>